import {Component, Input, OnInit} from '@angular/core';
import * as echarts from 'echarts';
import 'echarts-wordcloud';
import {ContentService} from '../content.service';
import {Page} from '../../common/model/page';
import {Router} from '@angular/router';

@Component({
  selector: 'app-policy-focus-chart',
  templateUrl: './policy-focus-chart.component.html',
  styleUrls: ['./policy-focus-chart.component.less']
})
export class PolicyFocusChartComponent implements OnInit {
  focusWordCondition: Page = new Page();
  focusData = [];
  @Input() heightCount: string;
  @Input() dataBySearch: any;

  constructor(private CService: ContentService,
              private router: Router) {
  }

  ngOnInit(): void {
    this.policyFocusData();
  }

  policyFocusData() {
    if (this.dataBySearch) {
      this.setWordCloud(this.dataBySearch);

    } else {
      this.focusWordCondition.pageSize = 50;
      this.CService.policyFocusData(this.focusWordCondition).subscribe(res => {
        this.focusData = res.result;
        this.setWordCloud(res.result);
      });
    }

  }

  setWordCloud(option: any) {
    const el = document.getElementById('publish-focus') as HTMLDivElement;
    const myCharts = echarts.init(el);
    myCharts.resize({height: this.heightCount});
    myCharts.setOption({
      series: [{
        type: 'wordCloud',

        shape: 'circle',

        // maskImage: maskImage,

        left: 'center',
        top: 'center',
        width: '100%',
        height: '100%',
        right: null,
        bottom: null,
        sizeRange: [35, 60],
        rotationRange: [-90, 90],
        rotationStep: 45,
        gridSize: 8,
        drawOutOfBound: false,
        textStyle: {
          normal: {
            fontFamily: 'sans-serif',
            fontWeight: 'bold',
            color() {
              // Random color
              return 'rgb(' + [
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160),
                Math.round(Math.random() * 160)
              ].join(',') + ')';
            }
          },
          emphasis: {
            shadowBlur: 10,
            shadowColor: '#333'
          }
        },

        // Data is an array. Each array item must have name and value property.
        data: option
      }]
    });
    myCharts.on('click', (params) => {
      this.navigateToDetail(params.data.name);
    });

  }

  navigateToDetail(value: string) {
    this.router.navigate(['/search-result'], {queryParams: {key: value}});

  }
}
